<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="icon" type="image/png" sizes="16x16" href="../images/logo1/vivid world.jpg">
    <title>Vivid World——个人中心</title>

    <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <link href="css/style.css" rel="stylesheet">

    <link href="css/colors/default-dark.css" id="theme" rel="stylesheet">
</head>

<body class="fix-header card-no-border fix-sidebar">
    <div class="preloader">
        <div class="loader">
            <div class="loader__figure"></div>
            <p class="loader__label">Vivid World</p>
        </div>
    </div>

    <div id="main-wrapper">
        <header class="topbar">
            <nav class="navbar top-navbar navbar-expand-md navbar-light">
                <!-- Logo -->
                <div class="navbar-header">
                    <a class="navbar-brand" href="index.html">
                        <b>
                            <img src="../images/logo1/vivid world.jpg" style="width: 32px; height: 32px;" alt="homepage"
                                class="dark-logo" />
                        </b>
                        <span>
                            Vivid World——个人中心
                        </span>
                    </a>
                </div>

                <div class="navbar-collapse">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark"
                                href="javascript:void(0)"><i class="ti-menu"></i></a> </li>
                    </ul>

                    <ul class="navbar-nav my-lg-0">
                        <li class="nav-item hidden-xs-down search-box"> <a
                                class="nav-link hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i
                                    class="ti-search"></i></a>
                            <form class="app-search">
                                <input type="text" class="form-control" placeholder="Search & enter"> <a
                                    class="srh-btn"><i class="ti-close"></i></a>
                            </form>
                        </li>

                        <!-- 右上角头像 -->
                        <li class="nav-item">
                            <a class="nav-link waves-effect waves-dark" href="#" id="Head_portrait_right"><img
                                    src="../images/home/touxiang0.png" alt="user" class="profile-pic" /></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>

        <aside class="left-sidebar">
            <div class="scroll-sidebar">
                <nav class="sidebar-nav">
                    <ul id="sidebarnav">
                        <!-- 导航栏 -->
                        <li> <a class="waves-effect waves-dark"  style="font-size:24px;color:white;" href="personalPage.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">个人资料</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;" href="releaseActivity.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">发布活动查看</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;"href="participateInActivity.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">参与活动查看</span></a></li>
                        <li> <a class="waves-effect waves-dark" style="font-size:24px;color:white;"href="../../indexAndRegister/index.html" aria-expanded="false"><i
                                    class="mdi mdi-account-check"></i><span class="hide-menu">返回主页</span></a></li>
                    </ul>
                </nav>
            </div>
        </aside>

        <div class="page-wrapper">

            <div class="container-fluid">

                <div class="row page-titles">
                    <div class="col-md-5 align-self-center">
                        <h3 class="text-themecolor">个人资料</h3>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-4 col-xlg-3 col-md-5">
                        <div class="card">
                            <div class="card-body">
                                <!-- 名片头像 -->
                                <center class="m-t-30" id="Head_portrait">
                                    <div id="Head_portrait_center" onclick="showUpdate()"><img
                                            src="../images/home/touxiang0.png" class="img-circle" width="150" /></div>
                                    <!-- 名片昵称 -->
                                    <h4 class="card-title m-t-10" id="u_name">我</h4>
                                    <!-- 名片别名 -->
                                    <h6 class="card-subtitle" id="u_alias">我</h6>
                                    <div class="row text-center justify-content-md-center">
                                        <!-- 默认值 -->
                                        <div class="col-3"><a href="javascript:void(0)" class="link"><b
                                                    class="icon-people">信誉积分：</b>
                                                <font class="font-medium" id="score">100</font>
                                            </a></div>
                                        <div class="col-3"><a href="javascript:void(0)" class="link"><b
                                                    class="icon-people">关注数：</b>
                                                <font class="font-medium" id="subscribe">0</font>
                                            </a></div>
                                        <div class="col-3"><a href="javascript:void(0)" class="link"><b
                                                    class="icon-people">粉丝数：</b>
                                                <font class="font-medium" id="fans">0</font>
                                            </a></div>
                                    </div>
                                </center>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8 col-xlg-9 col-md-7">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-horizontal form-material">
                                    <div class="form-group">
                                        <label class="col-md-12">昵称</label>
                                        <div class="col-md-12">
                                            <input type="text" placeholder="北京-公益-张三"
                                                class="form-control form-control-line" id="user_name" value="">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="example-email" class="col-md-12">电子邮箱</label>
                                        <div class="col-md-12">
                                            <input type="email" placeholder="zhangsan@163.com"
                                                class="form-control form-control-line" id="user_email">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">密码</label>
                                        <div class="col-md-12">
                                            <input type="password" placeholder="6-32位字母数字或特殊符号组成"
                                                class="form-control form-control-line" id="user_pswd"
                                                onfocus="showPswd()" onblur="closePswd()">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">手机号</label>
                                        <div class="col-md-12">
                                            <input type="text" placeholder="1234 456 7890"
                                                class="form-control form-control-line" id="user_phone">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-12">个人简介</label>
                                        <div class="col-md-12">
                                            <textarea rows="5" placeholder="这个人很懒，什么也没留下！"
                                                class="form-control form-control-line" id="user_Introduce"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-12">别名</label>
                                        <div class="col-sm-12">
                                            <input type="text" placeholder="公益-河北-石家庄"
                                                class="form-control form-control-line" id="user_alias">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-12">
                                            <button class="btn btn-success">修改个人资料</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <footer class="footer" style="text-align: center;">Copyright &copy; 2021.Vivid World Service Company
            </footer>
        </div>

    </div>

    <!-- All Jquery -->
    <script src="../assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="../assets/plugins/bootstrap/js/popper.min.js"></script>
    <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="js/perfect-scrollbar.jquery.min.js"></script>
    <!--Wave Effects -->
    <script src="js/waves.js"></script>
    <!--Menu sidebar -->
    <script src="js/sidebarmenu.js"></script>
    <!--Custom JavaScript -->
    <script src="js/custom.min.js"></script>

    <script>
        // 传入死数据，这里可以添加一个方法解析完数据后在页面显示。替换下面的字符串即可
        window.onload = function () {
            // 数据传参dom
            // 信誉积分
            let score = document.getElementById("score");
            // 关注数
            let subscribe = document.getElementById("subscribe");
            // 粉丝数
            let fans = document.getElementById("fans");
            // 昵称
            let user_name = document.getElementById("user_name");
            let u_name = document.getElementById("u_name");
            // 电子邮箱
            let user_email = document.getElementById("user_email");
            // 密码
            let user_pswd = document.getElementById("user_pswd");
            // 手机号
            let user_phone = document.getElementById("user_phone");
            // 个人简介
            let user_Introduce = document.getElementById("user_Introduce");
            // 别名
            let user_alias = document.getElementById("user_alias");
            let u_alias = document.getElementById("u_alias");
            // 头像
            let Head_portrait_right = document.getElementById("Head_portrait_right");
            let Head_portrait_center = document.getElementById("Head_portrait_center");
            // 上传头像
            let file = document.getElementById("file");

            // 显示头像
            let src = "../images/home/touxiang2.jpeg";
            Head_portrait_center.innerHTML =
                `<div id="Head_portrait_center" onclick="showUpdate()"><img
                                            src="${src}" class="img-circle" width="150"/></div>`;


            Head_portrait_right.innerHTML = `<img
            src="${src}" alt="user" class="profile-pic" />`;
            // 显示信誉积分
            score.innerHTML = 78;

            // 显示关注数
            subscribe.innerHTML = 17;

            // 显示粉丝数
            fans.innerHTML = 3;

            // 显示昵称
            user_name.value = "风一般的勇士";
            u_name.innerHTML = "风一般的勇士";

            // 显示别名
            user_alias.value = "吃喝玩乐逛北京";
            u_alias.innerHTML = "吃喝玩乐逛北京";


            // 显示邮箱
            user_email.value = "12345678@qq.com";

            // 显示密码
            user_pswd.value = "12345678";

            // 显示手机号
            user_phone.value = "13766852607";

            // 显示个人简介
            user_Introduce.value = "北漂，来自杭州，希望在北京找到一群可以分享的伙伴！"
        }

        function showPswd() {
            // 密码显示
            let user_pswd = document.getElementById("user_pswd");
            user_pswd.type = "text"; //修改输入框类型为text
        }

        function closePswd() {
            // 密码隐藏
            let user_pswd = document.getElementById("user_pswd");
            user_pswd.type = "password"; //修改输入框类型为password
        }

        function showUpdate() {
            //上传头像
            let Head_portrait_center = document.getElementById("Head_portrait_center");
            Head_portrait_center.innerHTML = `<div style="padding-left:8%"><input type="file" id="file"></div>`;
        }

        //上传头像
        function Upload() {
            //首先监听input框的变动，选中一个新的文件会触发change事件
            document.querySelector("#file").addEventListener("change", function () {
                //获取到选中的文件
                let file = document.querySelector("#file").files[0];
                //创建formdata对象
                let formdata = new FormData();
                formdata.append("file", file);
                //创建xhr，使用ajax进行文件上传
                let xhr = new XMLHttpRequest();
                xhr.open("post", "/");
                //回调
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        alert("上传成功！");
                        // document.querySelector("#file").innerText = xhr.responseText;
                    }
                }

                //将formdata上传
                xhr.send(formdata);
            });
        }
        
        // 提价按钮
        function submit() {
            //获取数据
            let score = document.getElementById("score");
            // 关注数
            let subscribe = document.getElementById("subscribe");
            // 粉丝数
            let fans = document.getElementById("fans");
            // 昵称
            let user_name = document.getElementById("user_name");
            let u_name = document.getElementById("u_name");
            // 电子邮箱
            let user_email = document.getElementById("user_email");
            // 密码
            let user_pswd = document.getElementById("user_pswd");
            // 手机号
            let user_phone = document.getElementById("user_phone");
            // 个人简介
            let user_Introduce = document.getElementById("user_Introduce");
            // 别名
            let user_alias = document.getElementById("user_alias");
            let u_alias = document.getElementById("u_alias");
            // 头像
            let Head_portrait_right = document.getElementById("Head_portrait_right");
            let Head_portrait_center = document.getElementById("Head_portrait_center");
            // 上传头像
            let file = document.getElementById("file");

            //上传头像
            Upload();
            //这里写提交方法
            // axios.post()
        }
    </script>
</body>

</html>